<template>
  <div class="per-conts">
    <div class="per-head">
      <div class="per-h-titles">
        <img src="@/assets/images/hd_default_user_avatar.png" alt="" />
        <h2>{{userInfo.realse_name||userInfo.phone}}</h2>
      </div>
      <div class="per-h-conts">
        <div>
          <h3>{{userInfo.is_vip!=1?'普通用户':'VIP会员'}}</h3>
          <p>{{userInfo.phone}}</p>
        </div>
        <van-button
          class="btn"
          size="small"
          color="linear-gradient(to right, #a1a5b6, #777b8c)"
          @click="$utils.push('/')"
          round
          >常规下款通道</van-button
        >
      </div>
    </div>
    <div class="per-cont">
      <div class="per-cont-head">
        <div class="pch-l">
          <img src="@/assets/images/ic_mine_wallet.png" alt="" />
          <h2>我的钱包</h2>
        </div>
        <div class="pch-r">
          <img src="@/assets/images/ic_secure.png" alt="" />
          <h2>账户保障中</h2>
        </div>
      </div>
      <ul class="per-cont-menu">
        <li @click="$utils.push('/personal/balance')">
          <h2>0.00</h2>
          <p>余额(元)</p>
        </li>
        <li>
          <h2>0</h2>
          <p>金币</p>
        </li>
        <li>
          <h2>0</h2>
          <p>拒就赔红包</p>
        </li>
      </ul>
    </div>
    <img class="p-banner" src="@/assets/images/bann.png" alt="" />
    <div class="per-service">
      <div class="ps-head">
        <img src="@/assets/images/ic_other_services.png" alt="" />
        <h2>其他服务</h2>
      </div>
      <div class="ps-cont">
        <van-cell class="ps-cont-item" to="/personal/help" is-link>
          <template #icon>
            <img src="@/assets/images/ic_mine_setting.png" alt="" />
          </template>
          <template #title>
            <span>帮助中心</span>
          </template>
        </van-cell>
        <van-cell class="ps-cont-item" is-link @click="out">
          <template #icon>
            <img src="@/assets/images/ic_mine_help.png" alt="" />
          </template>
          <template #title>
            <span>退出登录</span>
          </template>
        </van-cell>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { Dialog  } from 'vant'
import { getOut } from '@/api/user'
import { clearStore } from '@/utils/group'
export default {
  name: 'Personal',
   computed: {
    ...mapState({
      userInfo:state=>state.user.userInfo
    })
  },
  data() {
    return {}
  },
  mounted() {},
  methods: {
    out() {
      Dialog.confirm({
        title: '敏感操作',
        message: '是否确定退出登录？'
      })
        .then(() => {
          getOut().then(res => {
            this.$store.commit('user/clearToken') //清除token
            this.$store.commit('user/clearUserInfo') //清除用户信息
            this.$router.replace({
              path:'/login'
            })
          })
        })
        .catch(() => {
          // on cancel
        })
    }
  }
}
</script>

<style lang="less" scoped>
.per-conts {
  background: #faf9f9;
  padding-top: 20px;
  padding-bottom: 60px;
  .per-head {
    width: 330px;
    margin: 0 auto;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0px 0px 4px 4px #eee;
    overflow: hidden;
    .per-h-titles {
      width: 300px;
      margin: 0 auto;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-top: 20px;
      img {
        width: 70px;
        height: 70px;
        border: 1px solid #ccc;
        border-radius: 50%;
        margin-right: 10px;
      }
      h2 {
        font-size: 18px;
        font-weight: bold;
      }
    }
    .per-h-conts {
      display: flex;
      justify-content: space-around;
      align-items: center;
      background: #e1e5f4;
      padding: 14px 0;
      margin-top: 20px;
      div {
        h3 {
          font-size: 16px;
          color: #666974;
          font-weight: bold;
          margin-bottom: 6px;
        }
        p {
          font-size: 14px;
          color: #666974;
        }
      }
      .btn {
        ::v-deep .van-button__text {
          font-size: 12px;
        }
      }
    }
  }
}
.per-cont {
  width: 330px;
  margin: 20px auto;
  background: #fff;
  border-radius: 20px;
  .per-cont-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 15px;
    div {
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
    .pch-l {
      img {
        width: 20px;
        height: 20px;
      }
      h2 {
        color: #414141;
        font-size: 14px;
        margin-left: 4px;
      }
    }
    .pch-r {
      background: #ffdbe1;
      padding: 4px;
      border-radius: 6px;
      img {
        width: 14px;
        height: 16px;
      }
      h2 {
        color: #f83657;
        font-size: 10px;
        margin-left: 4px;
      }
    }
  }
  .per-cont-menu {
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px;
    li {
      width: 33.3%;
      text-align: center;
      h2 {
        color: #333;
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 10px;
      }
      p {
        font-size: 12px;
        color: #a3a3a3;
      }
    }
  }
}
.p-banner {
  display: block;
  width: 330px;
  height: 100px;
  margin: 20px auto;
}
.per-service {
  width: 330px;
  margin: 20px auto;
  background: #fff;
  border-radius: 20px;
  padding: 20px;
  .ps-head {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    h2 {
      font-size: 15px;
      color: #353535;
    }
    img {
      width: 16px;
      height: 16px;
      margin-right: 6px;
    }
  }
  .ps-cont {
    margin-top: 10px;
    .ps-cont-item {
      padding: 10px 0;
      align-items: center;
      &:nth-last-of-type(1) {
        padding-bottom: 0;
      }
      img {
        width: 24px;
        height: 24px;
        margin-right: 4px;
      }
      ::v-deep .van-cell__title {
        color: #404040;
        span {
          font-size: 18px;
        }
      }
    }
  }
}
</style>
